<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <Transition>
      <!-- 这里面的代码，通过v-if或是v-show切换就会有动画 -->
      <p v-if="show">Hello 文清</p>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const show = ref(false)
</script>

<style scoped>
.v-enter-to,
.v-leave-from {
  opacity: 1;
}
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 1s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
